<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件处理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			.demo{
				background-color: skyblue;
				padding: 10px;
			}
			.demo2{
				background-color: orange;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<!-- 
			事件绑定注意事项：
						1.事件的回调都配置在methods对象中
						2.methods中的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象。
						3.methods中的配置的函数，不要用箭头函数！！！！，否则this就不是vm了。
						4.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数。
			Vue提供的按键别名：
						回车 => enter
						换行 => tab
						退格 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						上 => up
						下 => down
						左 => left
						右 => right
			Vue提供的修饰键(只有按下这些按键，同时再去按别的，才触发事件)--用的少：
						ctrl
						alt
						shift
						meta
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>欢迎来到{{school}}</h1>

			<!-- 绑定事件--v-on方式 -->
			<button v-on:click="show1">点我提示信息1（v-on）</button> <br/><br/>

			<!-- 绑定事件--@方式 -->
			<button @click="show1">点我提示信息1（@）</button> <br/><br/>

			<!-- 绑定事件--@方式+传参 -->
			<button @click="show2(666,$event)">点我提示信息2（传参）</button> <br/><br/>

			<!-- 绑定事件--事件修饰符：阻止默认事件 -->
			<a href="https://www.baidu.com" @click.prevent="show3">点我提示信息3</a> <br/><br/>

			<!-- 绑定事件--事件修饰符：阻止事件冒泡 -->
			<div @click="show4" class="demo"> <br/><br/>
				<button @click.stop="show4">点我提示信息4</button> 
			</div> <br/><br/>

			<!-- 绑定事件--多个事件修饰符连写 -->
			<div @click="show5" class="demo2">
				<a href="https://www.baidu.com" @click.stop.prevent="show5">点我提示信息5</a>
			</div> <br/><br/>

			<!-- 绑定事件--键盘事件--按键别名-->
			<input type="text" @keyup.enter="show6">
			
			<!-- 绑定事件--键盘事件--按键编码（不推荐使用） -->
			<!-- <input type="text" @keyup.13="show6"> -->

			<!-- 绑定事件--键盘事件--修饰键 -->
			<!-- <input type="text" @keyup.ctrl.enter="show6" placeholder="按下ctrl的同时再按其他按键触发"> -->

		</div>

		<script type="text/javascript" >
			const vm = new Vue({
				el:'#root',
				data:{
					school:'德莱联盟'
				},
				methods:{
					show1(e){
						// console.log(e) //e是事件对象
						alert(`我是信息1，${this.school}`)
					},
					show2(number,e){
						console.log(e)
						console.log(this)//此处的this是vm
						alert(number)
					},
					show3(e){
						// e.preventDefault() //靠程序员自己阻止默认事件
						alert('我是信息3')
					},
					show4(e){
						// e.stopPropagation() //靠程序员自己阻止冒泡
						alert('我是信息4')
					},
					show5(e){
						// e.preventDefault() //靠程序员自己阻止默认事件
						// e.stopPropagation() //靠程序员自己阻止冒泡
						alert('我是信息4')
					},
					show6(e){
						// if(e.keyCode !== 13) return 
						console.log(e.target.value)
					}
				}
			})

			console.log(vm)
		</script>
	</body>
</html>